<template>
  <drawer :show="props.show" :show-border="false" :title="'接货时间'" @close="close(false,{})" :show-close="true">
    <view class="select_body">
      <view class="date_box">
        <view v-for="(item,index) in dateList" class="date_item" :class="{active:dateKey===index}" @click="chooseDate(index)">
          <text>{{ item.name }}</text>
          <text>{{ item.value }}</text>
        </view>
      </view>
      <view class="time_box">
        <view v-for="(item,index) in timeList" class="time_item" @click="chooseTime(index)">
          <text>{{ item.start }} - {{ item.end }}</text>
          <image class="check" src="../../assets/images/index/check.png" mode="scaleToFill" v-if="timeKey===index"></image>
        </view>
      </view>
    </view>
    <view class="save">
      <view class="btn" @click="save">确定</view>
    </view>
  </drawer>
</template>
<script lang="ts" setup>
import {computed, defineEmits, ref, watch} from "vue";
import useSendGoodsStore from "../../store/sendGoods";
import dayjs from "dayjs";
import Taro,{useDidShow} from "@tarojs/taro";
const sendGoodsStore = useSendGoodsStore();
const props = defineProps<{
  show: boolean
  date: string
  startTime: string
  endTime: string
}>()
const emit = defineEmits<{
  (e: 'close', save: boolean, times: any)
}>()


const nowTime = new Date()
const dateList = ref([
  { name: '今天', value: dayjs(nowTime).format("YYYY-MM-DD") },
  { name: '明天', value: dayjs(nowTime.getTime() + 24 * 60 * 60 * 1000).format("YYYY-MM-DD") },
  { name: '后天', value: dayjs(nowTime.getTime() + 48 * 60 * 60 * 1000).format("YYYY-MM-DD") },
  { name: '大后天', value: dayjs(nowTime.getTime() + 72 * 60 * 60 * 1000).format("YYYY-MM-DD") },
])
const timeList = ref([
  { start: '09:00:00', end: '11:00:00' },
  { start: '11:00:00', end: '13:00:00' },
  { start: '13:00:00', end: '15:00:00' },
  { start: '15:00:00', end: '17:00:00' },
  { start: '17:00:00', end: '19:00:00' },
])
const dateKey = ref<number>(-1)
const timeKey = ref<number>(-1)
const chooseDate = (index)=>{
  dateKey.value = index
  timeKey.value = -1
}
const chooseTime = (index)=>{
  if(dateKey.value===-1){
    Taro.showToast({
      icon: 'none',
      title: '请先选择日期'
    })
    return
  }
  timeKey.value = index
}

watch(()=>props.show,(newVal)=>{
  if(newVal){
    dateKey.value = dateList.value.findIndex(item=>{
      return item.value === props.date
    })
    timeKey.value = dateList.value.findIndex(item=>{
      return item.start === props.startTime && item.end === props.endTime
    })
  }
})

const close = (save:boolean, times:any) =>{
  emit('close', save, times)
}
const save = ()=>{
  //receivingTime
  if(dateKey===-1 || timeKey===-1){
    Taro.showToast({
      icon: 'none',
      title: '请先选择时段'
    })
    return
  }
  close(true, {
    date: dateList.value[dateKey.value].value,
    start: timeList.value[timeKey.value].start,
    end: timeList.value[timeKey.value].end
  })
}
</script>
<style lang="scss">
.select_body {
  width: 100%;
  height: 600rpx;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
  .date_box {
    width: 246rpx;
    height: 100%;
    background-color: #f5f5f5;
    .date_item {
      width: 100%;
      height: 112rpx;
      background-color: #f5f5f5;
      color: #666;
      font-size: 28rpx;
      line-height: 36rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      &.active {
        color: #252525;
        background-color: #fff;
        font-weight: 500;
        &:before {
          content: '';
          width: 4rpx;
          height: 112rpx;
          background-color: #0966ff;
          top: 0;
          left: 0;
          position: absolute;
        }
      }
    }
  }
  .time_box {
    width: calc(100% - 246rpx);
    .time_item {
      width: 100%;
      height: 112rpx;
      line-height: 112rpx;
      background-color: #fff;
      color: #252525;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      margin-left: 48rpx;
      .check {
        margin-left: 34rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
.save {
  width: 100%;
  background-color: #fff;
  padding: 20rpx 0;
  .btn {
    width: calc(100% - 48rpx);
    height: 80rpx;
    margin-left: 24rpx;
    border-radius: 40rpx;
    background-color: #0966ff;
    color: #fff;
    text-align: center;
    line-height: 80rpx;
  }
}
</style>
